<script setup>
import { ref, onMounted, watch } from "vue";
import {
  queryAllClazzApi,
  queryClazzByIdApi,
  addClazzApi,
  updateClazzApi,
  delClazzByIdApi,
} from "../../api/clazz";
import { checkDateRange } from "../../utils/date";
import { getAllEmpsApi } from "../../api/emp";

const dialogVisible = ref(false);
const dialogTitle = ref("");
const clazzList = ref([]);
const total = ref(0);
const queryParam = ref({
  name: "",
  date: [],
  begin: "",
  end: "",
  page: 1,
  pageSize: 10,
});
const clazzData = ref({
  name: "",
  room: "",
  masterId: "",
  subject: undefined,
  beginDate: "",
  endDate: "",
});
const rules = ref({
  name: [{ required: true, message: "请输入班级名称", trigger: "blur" }],
  room: [{ required: true, message: "请输入教室", trigger: "blur" }],
  masterId: [{ required: true, message: "请选择班主任", trigger: "blur" }],
  subject: [{ required: true, message: "请选择课程", trigger: "blur" }],
  beginDate: [{ required: true, message: "请选择开课时间", trigger: "blur" }],
  endDate: [{ required: true, message: "请选择结课时间", trigger: "blur" }],
});
const empList = ref([]);
const dialogRef = ref(null);
const subjects = ref([
  { label: "Java", value: "1" },
  { label: "前端", value: "2" },
  { label: "大数据", value: "3" },
  { label: "Python", value: "4" },
  { label: "Go", value: "5" },
  { label: "嵌入式", value: "6" },
]);
const addClazz = () => {
  dialogVisible.value = true;
  dialogTitle.value = "添加班级";
  clazzData.value = {
    name: "",
    room: "",
    masterId: "",
    subject: undefined,
    beginDate: "",
    endDate: "",
  };
  dialogRef.value?.resetFields();
};
const queryAllClazz = async () => {
  const {
    data: { total: num, rows },
  } = await queryAllClazzApi(
    queryParam.value.name,
    queryParam.value.begin,
    queryParam.value.end,
    queryParam.value.page,
    queryParam.value.pageSize
  );
  console.log("rows", rows);
  clazzList.value = rows;
  total.value = num;
};
const editClazz = async (id) => {
  dialogVisible.value = true;
  dialogTitle.value = "编辑班级";
  const { data } = await queryClazzByIdApi(id);
  clazzData.value = data;
  dialogRef.value.resetFields();
};
const queryAllEmps = async () => {
  const { data } = await getAllEmpsApi();

  empList.value = data;
};
const cancelDialog = () => {
  dialogVisible.value = false;
  ElMessage({
    message: "您已取消编辑",
    type: "success",
  });
};
const clearAll = () => {
  queryParam.value = {
    name: "",
    date: [],
    begin: "",
    end: "",
    page: 1,
    pageSize: 10,
  };
  queryAllClazz();
};
const saveOrAdd = () => {
  dialogRef.value.validate(async (valid) => {
    if (valid) {
      if (!clazzData.value.id) {
        await addClazzApi(clazzData.value);
        ElMessage.success("添加班级成功！");
        dialogVisible.value = false;
        queryAllClazz();
      } else {
        await updateClazzApi(clazzData.value);
        ElMessage.success("修改班级成功！");
        dialogVisible.value = false;
        queryAllClazz();
      }
    }
  });
};
const delClazz = async (id) => {
  await ElMessageBox.confirm("请问您确认要删除?", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  });
  await delClazzByIdApi(id);
  ElMessage.success("删除成功！");
  queryAllClazz();
};
const handleCurrentChange = (page) => {
  queryAllClazz();
};
watch(
  () => queryParam.value,
  (newVal, oldVal) => {
    queryParam.value.begin = newVal.date[0];
    queryParam.value.end = newVal.date[1];
  },
  {
    deep: true,
  }
);
onMounted(() => {
  queryAllEmps();
  queryAllClazz();
});
</script>

<template>
  <h1>班级管理</h1>
  <div class="container">
    <el-form :model="queryParam" :inline="true">
      <el-form-item label="班级名称">
        <el-input v-model="queryParam.name"></el-input>
      </el-form-item>
      <el-form-item label="结课时间">
        <el-date-picker
          v-model="queryParam.date"
          type="daterange"
          range-separator="到"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryAllClazz">查询</el-button>
        <el-button type="info" @click="clearAll">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="container">
    <el-button type="success" @click="addClazz">+ 新增班级</el-button>
  </div>
  <br />
  <br />
  <div class="container">
    <el-table :data="clazzList" stripe style="width: 100%" border>
      <el-table-column label="序号" width="80" type="index" />
      <el-table-column prop="name" label="班级名称" width="220" />
      <el-table-column prop="room" label="班级课堂" width="120" />
      <el-table-column prop="masterName" label="班主任" width="120" />
      <el-table-column prop="beginDate" label="开课时间" width="150" />
      <el-table-column prop="endDate" label="结课时间" width="150" />
      <el-table-column prop="address" label="状态" width="120">
        <template #default="{ row }">
          <span
            v-if="checkDateRange(row.beginDate, row.endDate) == 0"
            class="before"
            >未开课</span
          >
          <span
            v-if="checkDateRange(row.beginDate, row.endDate) == 1"
            class="between"
            >进行中</span
          >
          <span
            v-if="checkDateRange(row.beginDate, row.endDate) == 2"
            class="after"
            >已结束</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="最后修改时间" />
      <el-table-column prop="address" label="操作">
        <template #default="{ row }">
          <el-button type="primary" @click="editClazz(row.id)">编辑</el-button>
          <el-button type="danger" @click="delClazz(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <div class="container pagination">
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      v-model:current-page="queryParam.page"
      @current-change="handleCurrentChange"
    />
  </div>

  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600">
    <el-form
      label-width="80px"
      :rules="rules"
      :model="clazzData"
      ref="dialogRef"
    >
      <el-form-item label="班级名称" prop="name">
        <el-input v-model="clazzData.name"></el-input>
      </el-form-item>
      <el-form-item label="班级教室" prop="room">
        <el-input v-model="clazzData.room"></el-input>
      </el-form-item>
      <el-form-item label="开课时间" prop="beginDate">
        <el-date-picker
          v-model="clazzData.beginDate"
          type="date"
          placeholder="选择开课日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="结课时间" prop="endDate">
        <el-date-picker
          v-model="clazzData.endDate"
          type="date"
          placeholder="选择结课日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="班主任" prop="masterId">
        <el-select
          v-model="clazzData.masterId"
          placeholder="请选择班主任"
          style="width: 100%"
        >
          <el-option
            v-for="item in empList"
            :key="item.value"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="学科" prop="subject">
        <el-select
          v-model="clazzData.subject"
          placeholder="请选择学科"
          style="width: 100%"
        >
          <el-option
            v-for="item in subjects"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelDialog">取消</el-button>
        <el-button type="primary" @click="saveOrAdd">
          <span v-if="!clazzData.id">增加</span>
          <span v-else>保存</span>
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
h1 {
  margin-bottom: 10px;
}
:deep(.el-date-editor) {
  width: 100%;
}
.pagination {
  margin-top: 20px;
  margin-right: 20px;
  display: flex;
  justify-content: flex-end;
}
.between {
  color: #409eff;
}
.before {
  color: #67c23a;
}
.after {
  color: #f56c6c;
}
</style>
